<template>
  <div>
    <TopFilter
      ref="conditionFilter"
      :list="searchList"
      :cols="3"
      labelWidth="120"
      @filterChange="changeHandle"
    />
    <FilterTable
      ref="table"
      :columns="tableColumns"
      :isSelectColumn="isSelectColumn"
      :fetchapi="fetchApi"
      :params="searchData"
      :datakey="'records'"
      :onColumnsChange="tableColumns => this.tableColumns = tableColumns"
    ></FilterTable>
    <!-- 右侧浮动 -->
    <Drawer
      :visible.sync="visibleDrawer"
      title="营销素材审核"
      destroyOnClose
      :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
    >
      <info-modal
        :type="handleTypeAdd"
        v-model="initData"
        :rowData="formData"
        @close="closeHandler"
      />
    </Drawer>
  </div>
</template>

<script>
import { exportExcelFile } from '@/utils/index';
import { dictionary } from '@/utils/dictMixin';
import { getComOrgTreeList } from '@/api/common/org/employeeInfo';
import { getJsonTree } from '@/utils/index';
import { getMaterialList, getmaterialTypeOneList, getMaterialExcelList, selectMaterialListByBill, batchHandAll, batchtyAll } from '@/api/cms-api/projectOperating/program/push';
import infoModal from './info';
export default {
  mixins: [dictionary],
  components: {
    infoModal
  },
  data() {
    return {
      searchList: this.getSearchList(), //搜索框配置
      tableColumns: this.getTableColumns(),
      isSelectColumn: false,
      visibleDrawer: false,
      initData: {},
      visibleDialog: false,
      fetchApi: getMaterialList, //调用API
      searchData: { materialStatus: 25361002 }, //搜索数据
      visibleDrawer: false,
      exportLoading: false,
      formData: {},
      handleTypeAdd: '',
      idsOK: [] //批量提报的ids
    };
  },
  methods: {
    //搜索
    getSearchList() {
      return [
        { type: 'INPUT', label: '营销素材代码', fieldName: 'materialCode', placeholder: '请输入...' },
        { type: 'INPUT', label: '营销素材名称', fieldName: 'materialName', placeholder: '请输入...' },
        {
          type: 'INPUT_TREE',
          label: '来源部门',
          fieldName: 'orgId',
          placeholder: '请选择...',
          initialValue: '',
          itemList: []
          // rules: [{ required: true, message: '请选择所属部门', trigger: 'change' }]
        },
        {
          type: 'SELECT',
          label: '营销素材类型-一级',
          fieldName: 'materialTypeOne',
          placeholder: '请选择...',
          itemList: [],
          change: value => {
            this.initmaterialTypeTwo(value);
          }
        },
        {
          type: 'SELECT',
          label: '营销素材类型-二级',
          fieldName: 'materialTypeTwo',
          placeholder: '请选择...',
          itemList: [],
          change: value => {
            this.initmaterialTypeThree(value);
          }
        },
        {
          type: 'SELECT',
          label: '营销素材类型-三级',
          fieldName: 'materialTypeThree',
          placeholder: '请选择...',
          itemList: [],
          change: value => {
            this.initmaterialTypeFour(value);
          }
        },
        {
          type: 'SELECT',
          label: '营销素材类型-四级',
          fieldName: 'materialTypeFour',
          placeholder: '请选择...',
          itemList: [],
          change: value => {
            this.initmaterialTypeFive(value);
          }
        },
        { type: 'SELECT', label: '营销素材类型-五级', fieldName: 'materialTypeFive', placeholder: '请选择...', itemList: [] }
      ];
    },
    //取营销素材类型-一级
    async initmaterialTypeOne() {
      let res = [];
      this.dataParams = { parentTypeId: '' };
      let rd = await getmaterialTypeOneList(this.dataParams);
      for (let i in rd.data) {
        res.push({ text: rd.data[i].materialTypeName, value: rd.data[i].materialTypeId });
      }
      this.searchList.find(item => item.fieldName === 'materialTypeOne').itemList = res;
      // this.searchList[2].itemList = res;
    },
    //取营销素材类型-二级
    async initmaterialTypeTwo(parentTypeId) {
      this.searchList.find(item => item.fieldName === 'materialTypeTwo').initialValue = '';
      this.searchList.find(item => item.fieldName === 'materialTypeThree').initialValue = '';
      this.searchList.find(item => item.fieldName === 'materialTypeFour').initialValue = '';
      this.searchList.find(item => item.fieldName === 'materialTypeFive').initialValue = '';
      this.searchList.find(item => item.fieldName === 'materialTypeTwo').itemList = [];
      this.searchList.find(item => item.fieldName === 'materialTypeThree').itemList = [];
      this.searchList.find(item => item.fieldName === 'materialTypeFour').itemList = [];
      this.searchList.find(item => item.fieldName === 'materialTypeFive').itemList = [];
      if (parentTypeId != '') {
        let res = [];
        this.dataParams = { parentTypeId: parentTypeId };
        let rd = await getmaterialTypeOneList(this.dataParams);
        for (let i in rd.data) {
          res.push({ text: rd.data[i].materialTypeName, value: rd.data[i].materialTypeId });
        }
        this.searchList.find(item => item.fieldName === 'materialTypeTwo').itemList = res;
      }
      // this.searchList[3].itemList = res;
    },
    //取营销素材类型-三级
    async initmaterialTypeThree(parentTypeId) {
      this.searchList.find(item => item.fieldName === 'materialTypeThree').initialValue = '';
      this.searchList.find(item => item.fieldName === 'materialTypeFour').initialValue = '';
      this.searchList.find(item => item.fieldName === 'materialTypeFive').initialValue = '';
      this.searchList.find(item => item.fieldName === 'materialTypeThree').itemList = [];
      this.searchList.find(item => item.fieldName === 'materialTypeFour').itemList = [];
      this.searchList.find(item => item.fieldName === 'materialTypeFive').itemList = [];
      if (parentTypeId != '') {
        let res = [];
        this.dataParams = { parentTypeId: parentTypeId };
        let rd = await getmaterialTypeOneList(this.dataParams);
        for (let i in rd.data) {
          res.push({ text: rd.data[i].materialTypeName, value: rd.data[i].materialTypeId });
        }
        this.searchList.find(item => item.fieldName === 'materialTypeThree').itemList = res;
      }
      // this.searchList[4].itemList = res;
    },
    //取营销素材类型-四级
    async initmaterialTypeFour(parentTypeId) {
      this.searchList.find(item => item.fieldName === 'materialTypeFour').initialValue = '';
      this.searchList.find(item => item.fieldName === 'materialTypeFive').initialValue = '';
      this.searchList.find(item => item.fieldName === 'materialTypeFour').itemList = [];
      this.searchList.find(item => item.fieldName === 'materialTypeFive').itemList = [];
      if (parentTypeId != '') {
        let res = [];
        this.dataParams = { parentTypeId: parentTypeId };
        let rd = await getmaterialTypeOneList(this.dataParams);
        for (let i in rd.data) {
          res.push({ text: rd.data[i].materialTypeName, value: rd.data[i].materialTypeId });
        }
        this.searchList.find(item => item.fieldName === 'materialTypeFour').itemList = res;
      }
      // this.searchList[5].itemList = res;
    },
    //取营销素材类型-五级
    async initmaterialTypeFive(parentTypeId) {
      this.searchList.find(item => item.fieldName === 'materialTypeFive').initialValue = '';
      this.searchList.find(item => item.fieldName === 'materialTypeFive').itemList = [];
      if (parentTypeId != '') {
        let res = [];
        this.dataParams = { parentTypeId: parentTypeId };
        let rd = await getmaterialTypeOneList(this.dataParams);
        for (let i in rd.data) {
          res.push({ text: rd.data[i].materialTypeName, value: rd.data[i].materialTypeId });
        }
        this.searchList.find(item => item.fieldName === 'materialTypeFive').itemList = res;
      }
      // this.searchList[6].itemList = res;
    },
    //表单变更时赋值
    // changeHandle(data) {
    //   this.searchData = Object.assign(data);
    //   // this.searchData = Object.assign(data);
    //   console.log(data);
    // },
    changeHandle(data) {
      data = Object.assign({}, { materialStatus: 25361002 }, data);
      this.searchData = Object.assign({}, data);
    },
    getTableColumns() {
      return [
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 100,
          fixed: 'left',
          render: (props, h) => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.drawerHandle(props.row, 'edit')}>
                  审核
                </el-button>
              </div>
            );
          }
        },
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        { title: '营销素材代码', dataIndex: 'materialCode', sorter: true },
        { title: '营销素材名称', dataIndex: 'materialName', sorter: true },
        { title: '来源部门', dataIndex: 'orgName', sorter: true },
        {
          title: '营销素材状态',
          dataIndex: 'materialStatus',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.materialStatus, '2536')}</span>;
          }
        },
        {
          title: '是否需要反馈',
          dataIndex: 'isNeedFeedback',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.isNeedFeedback, '1004')}</span>;
          }
        },
        // {
        //   title: '营销素材类型-一级',
        //   dataIndex: 'materialTypeOne',
        //   sorter: true,
        //   hidden: true
        // },
        // {
        //   title: '营销素材类型-二级',
        //   dataIndex: 'materialTypeTwo',
        //   sorter: true,
        //   hidden: true
        // },
        // {
        //   title: '营销素材类型-三级',
        //   dataIndex: 'materialTypeThree',
        //   sorter: true,
        //   hidden: true
        // },
        // {
        //   title: '营销素材类型-四级',
        //   dataIndex: 'materialTypeFour',
        //   sorter: true,
        //   hidden: true
        // },
        // {
        //   title: '营销素材类型-五级',
        //   dataIndex: 'materialTypeFive',
        //   sorter: true,
        //   hidden: true
        // },
        {
          title: '营销素材类型-一级',
          dataIndex: 'materialTypeOneName',
          sorter: true
        },
        {
          title: '营销素材类型-二级',
          dataIndex: 'materialTypeTwoName',
          sorter: true
        },
        {
          title: '营销素材类型-三级',
          dataIndex: 'materialTypeThreeName',
          sorter: true
        },
        {
          title: '营销素材类型-四级',
          dataIndex: 'materialTypeFourName',
          sorter: true
        },
        {
          title: '营销素材类型-五级',
          dataIndex: 'materialTypeFiveName',
          sorter: true
        }
        // { title: '来源部门', dataIndex: 'sourceDept', sorter: true, hidden: true },
        // {
        //   title: '反馈截止日期',
        //   dataIndex: 'feedbackEndDate',
        //   sorter: true,
        //   hidden: true,
        //   render: props => {
        //     return <span>{this.formatDates(props.row.feedbackEndDate)} </span>;
        //   }
        // }
      ];
    },
    formatDates: function(value) {
      // 这里的 value 就是需要过滤的数据
      if (value == null || value == '') {
        return '';
      }
      var date = new Date(value);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      return year + '-' + month + '-' + day;
    },
    openDialog() {
      this.visibleDialog = true;
    },
    // closeDialog(data) {
    //   this.visibleDialog = false; //关闭弹窗
    //   //返回数据逻辑自己写
    //   console.log(data);
    // },
    closeDialog(param) {
      this.$emit('close', false, param);
    },
    //详情
    async drawerHandle(row, type) {
      //编辑
      if (type === 'edit') {
        let res = {};
        this.handleTypeAdd = 'edit';
        this.formData = row;
        let fileParams = { materialId: this.formData.materialId, billType: 25721001 };
        res = await selectMaterialListByBill(fileParams);
        if (res.data.length > 0) {
          let caseUrlList = [];
          for (let j = 0; j < res.data.length; j++) {
            let o1 = { name: res.data[j].fileName };
            let o2 = { url: res.data[j].fileId };
            let a = Object.assign(o1, o2);
            caseUrlList.push(a);
          }
          this.formData = Object.assign({}, { caseUrl: caseUrlList }, this.formData);
        }
        this.visibleDrawer = true;
      }
    },
    //关闭详情
    closeHandler(val, type) {
      this.visibleDrawer = false;
      if (type === 'refresh') {
        // 重新加载
        this.searchData = { ...this.searchData };
      }
    },
    async inputTree() {
      const res = await getComOrgTreeList();
      var that = res.data;
      that.forEach(el => (el.text = el.text));
      that.forEach(el => (el.value = el.orgId));
      that.forEach(el => (el.parentId = el.parent));
      this.searchList.find(item => item.fieldName === 'orgId').itemList = getJsonTree(that);
      // this.searchList[2].itemList = getJsonTree(that);
    }
  },
  mounted() {
    //初始化营销素材类型-一级
    this.initmaterialTypeOne();
    // this.searchData = { IsinitParam: 1 };
  },
  created() {
    //部门树
    this.inputTree();
  }
};
</script>

<!--style scoped>
    .cover-container{
        width:70vw !important;
    }
</style -->
<style>
.cover-container {
  width: 70vw !important;
}
</style>
